<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="generator" content="xidoc"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="/styles/xi.min.css" /><link rel="stylesheet" href="/styles/xd.min.css" /><link rel="stylesheet" href="/styles/main.css" /><link rel="icon" href="/images/xigoi-thicc.svg" />
<script async src="/scripts/counter.js"></script>
<script async src="/scripts/hover-prefetch.js"></script><script type="module">import Q from"/scripts/q.min.js";Q(document.body,{u1:6,u2:3,v1:2,v2:5})</script><title>Determinant Visualization | xigoi</title><style>.inputs{display:flex;
flex-flow:row wrap;}
.input-container{width:20rem;
display:flex;
flex-flow:column nowrap;}
label{font-family:var(--sans-serif);}</style></head><body>

<a href="/"><header><svg id="xigoi-logo" width="2cm" height="2cm" viewBox="-7 -2 24 24" xmlns="http://www.w3.org/2000/svg"><title>xigoi logo</title>
<path d="M 0 20 L 9 8 A 5 5 0 1 0 1 8 L 4 12 A 5 5 0 0 0 8 14 A 2 2 0 0 1 10 16 A 4 4 0 0 1 2 16 A 5 5 0 0 1 3 13 A 10 10 0 0 0 5 7" stroke="#0ff" stroke-width="1" />
<circle cx="5" cy="5" r="1" fill="#f80" /></svg>
<div class="xigoi">xigoi</div></header></a>
<h1>Determinant Visualization</h1>
<div class="inputs"><div class="input-container"><input id="u1" q-model="u1" type="range" min="-10" max="10" />
<label for="u1" q-html="`u<sub>1</sub> = ${u1}`"></label></div>
<div class="input-container"><input id="u2" q-model="u2" type="range" min="-10" max="10" />
<label for="u2" q-html="`u<sub>2</sub> = ${u2}`"></label></div>
<div class="input-container"><input id="v1" q-model="v1" type="range" min="-10" max="10" />
<label for="v1" q-html="`v<sub>1</sub> = ${v1}`"></label></div>
<div class="input-container"><input id="v2" q-model="v2" type="range" min="-10" max="10" />
<label for="v2" q-html="`v<sub>2</sub> = ${v2}`"></label></div></div>
<svg width="360" height="360" viewBox="-12 -12 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><rect q-bind:x="Math.min(0,u1)" q-bind:y="-Math.max(0,v2)" q-bind:width="Math.abs(u1)" q-bind:height="Math.abs(v2)" fill="#080" opacity="0.5" />
<rect q-bind:x="Math.min(0,v1)" q-bind:y="-Math.max(0,u2)" q-bind:width="Math.abs(v1)" q-bind:height="Math.abs(u2)" fill="#800" opacity="0.5" />
<path id="axes" d="M-11 0L11 0M0 -11L0 11" stroke="#fff" stroke-width="0.2"  />
<path id="u" q-bind:d="`M0 0L${u1} ${-u2}M${v1} ${-v2}L${+u1+ +v1} ${-u2-v2}`" stroke="#f80" stroke-width="0.2"  />
<path id="v" q-bind:d="`M0 0L${v1} ${-v2}M${u1} ${-u2}L${+u1+ +v1} ${-u2-v2}`" stroke="#80f" stroke-width="0.2"  /></svg>
</body></html>
